<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>

import { ChartUtils } from '../utils/chart_tools'
// const chartUtil = (function(){return new ChartUtils()})()

export default {
  data() {
    return {
      time_inter: null,
      time_out: null,
      chartUtil: new ChartUtils(),
      // chart: null
    };
  },
  props: {
    option: {
      type: Object,
      default() {
        return {
          nothing: true,
        };
      },
    },
  },
  watch: {
    option: function () {
      this.init();
    },
  },
  methods: {
    // mounse_enter() {
    //   clearTimeout(this.time_out);
    //   clearInterval(this.time_inter);
    // },
    // mounse_leave() {
    //   this.time_out = setTimeout(() => {
    //     this.time_inter = this.chartUtil.startRoll(2);
    //   }, 2000);
    // },
    init() {
      if (
        !this.option ||
        this.option.nothing ||
        Object.keys(this.option).length == 0
      ) {
        return;
      }
      clearInterval(this.time_inter);
      clearTimeout(this.time_out);
      this.chartUtil.setDom(this.$refs["chart"]);
      this.chartUtil.setOption(this.option);
      // this.chartUtil.addCall(this.emitChange)
      // if (this.step2 > 0) {
      //   this.chartUtil.setStep(this.step1, this.step2);
      //   // 使用刚指定的配置项和数据显示图表。
      //   this.time_inter = this.chartUtil.startRoll(this.intv);
      // }
    },
    emitChange(v) {
      this.$emit('change', v)
    }
  },

  mounted() {
    this.init();
  },
};
</script>

<style>
.chart-container {
  height: calc(100% - 40px);
  width: 100%;
  /* background: white; */
  /* 修改表格背景色 */
  background-color: rgb(18,36,62);
  
  margin: 20px 0;
  box-sizing: border-box;
}
</style>